<template>
  <div id="card">
    <div class="card-up">
      <span class="card-up-logo">S</span>
      <span class="card-up-word">开通山姆会员 享品质生活</span>
      <button @click="toLogin">
        {{ status ? '已开通' : '去开通' }}
        <i class="iconfont icon-jiantou_yemian_xiangyou_o"></i>
      </button>

      <WelcomeCard></WelcomeCard>
      <MemberHobby></MemberHobby>
    </div>
  </div>
</template>
<script>
import WelcomeCard from './WelcomeCard/WelcomeCard.vue';
import MemberHobby from '@/components/MemberCard/MemberHobby/MemberHobby'
export default {
  name: 'MemberCard',
  components: {
    WelcomeCard,
    MemberHobby
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      status:localStorage.getItem('status')
    }
  },
  methods:{
    toLogin(){
      this.$router.push('/login')
    }
  }
};
</script>
<style lang='less' scoped>
#card {
  width: 36rem;
  height: 37rem;
  background-color: rgb(246, 198, 140);
  margin: 0 auto;
  margin-top: 1rem;
  .card-up{
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
    .card-up-logo{
      display: inline-block;
      width: 2rem;
      height: 2rem;
      background-color: black;
      color: white;
      line-height: 2rem;
    }
    .card-up-word{
      margin-left: 1.2rem;
      color: black;
    }

    button{
      width: 8rem;
      color: white;
      margin-left: 4rem;
      border-radius: 1rem;
      background-color: rgba(0, 0, 0, 0.801);
      font-size: 1.3rem;
      font-weight: bold;
    }
  }
}
</style>